let container = document.querySelector(".container");
let style = document.querySelector("#style");
let str = ` /*你好,我是一名前端小白
  *接下来本小白用CSS写一个太极八卦
  */
 /*首先创建一个div
  *给定高度和宽度
  *定位
  *圆形
  *添加背景色
  *添加阴影
  */
 .bagua{
     position: fixed;
     top: 8vh;
     right: 10vw;
     border: black solid 1px;
     height: 202px;
     width: 202px;
     border-radius: 50%;
     background: rgb(0,0,0);
     background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 50%, rgba(255,255,255,1) 50%);
     box-shadow: -10px 10px 5px #888888;
 }
 /*
  *再写两个"鱼眼"
  */
 .bagua:before,.bagua:after{
     content: '';
     display: inline-block;
     height: 100px;
     width: 100px;
 }
 /*
  *两个"鱼眼"不同的定位和背景颜色
  */
 .bagua:before{
     border-radius: 50%;
     position: absolute;
     top: 50px;
     left: 0;
     background: rgb(0,0,0);
     background: radial-gradient(circle, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
 }
 .bagua:after{
     border-radius: 50%;
     position: absolute;
     top: 50px;
     right: 0;
     background: rgb(255,255,255);
     background: radial-gradient(circle, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
 }
 /*OK,太极八卦写完!*/
`;
// str = str.replace(/\n/g,'<br>');
let str2 = '';
let i = 0;
let step = () => {
	setTimeout(() => {
		if (str[i] === '\n') {
			str2 += '<br>';
            }else if(str[i] === '\t') {
			str2 += '&nbsp;&nbsp;&nbsp;&nbsp;';
		}else if(str[i] === ' ') {
			str2 += '&nbsp;';
		} else {
			str2 += str[i];
		}
		container.innerHTML = str2;
		style.innerHTML = str.substring(0,i);
		window.scrollTo(0,999999)
        container.scrollTo(0, 999999);
		if (i >= str.length - 1) return;
		i++;
		step();
		// console.log(i);
		// console.log(str.length)
		// console.log(str2)
	}, 50)
}
step();
// console.log(demo);
